<template>
  <el-dialog 
    class="ba-operate-dialog" 
    :close-on-click-modal="false" 
    :model-value="baTable.form.operate=='view' ? true : false" 
    :title="'JOB单明细'"
    @close="baTable.toggleForm">
    <div style="min-height: 400px">
      <el-table :data="state.table" style="width: 100%" v-loading="state.loading">
        <el-table-column  type="expand">
              <template #default="props">
                  <el-table :data="props.row.two" :border="false">
                      <el-table-column width="100">
                      </el-table-column>
                      <el-table-column label="对账单号" prop="MARKNO" />
                      <!-- <el-table-column label="JOB NO" prop="JOBNO" /> -->
                      <el-table-column label="费用类型" prop="BILLCLASS" />
                      <el-table-column label="往来单位" prop="CORPCODE" />
                      <el-table-column label="费用项目" prop="ITEMCODE" />
                      <el-table-column label="币别" prop="MONEYTYPE" />
                      <el-table-column label="金额" prop="MONEY" />
                      <el-table-column label="税率" prop="TAXRATE" />
                      <el-table-column label="数量" prop="ROW_NUMBER" />
                      <el-table-column label="计价单位" prop="PRICETYPE" />
                      <el-table-column label="费率" prop="RATIO" />
                      <!-- <el-table-column label="对账人" prop="DZOP" /> -->
                      <!-- <el-table-column label="对账单日期" prop="DZDATE" /> -->
                      <!-- <el-table-column label="JOB单制作人" prop="JOBOP" /> -->
                      <!-- <el-table-column label="JOB单日期" prop="JOBDATE" /> -->
                  </el-table>
              </template>
          </el-table-column>
        <el-table-column prop="TZID" :label="t('tz.TZID')" />
        <el-table-column prop="SENDER" :label="t('tz.SENDER')" />
        <el-table-column prop="GOODSC" :label="t('tz.GOODSC')" />
        <el-table-column prop="ENAME" :label="'英文名'" />
        <el-table-column prop="CNTRNO" :label="'箱号'" />
        <el-table-column prop="PORTLOAD" :label="t('tz.PORTLOAD')" />
        <el-table-column prop="PORTDIS" :label="t('tz.PORTDIS')" />
        <el-table-column prop="PORTLOAD" :label="t('tz.PORTLOAD')" />
        <el-table-column prop="RMB" :label="'应收人民币'" />
        <el-table-column prop="USD" :label="'应收美金'" />
        <el-table-column prop="ZHDATE" :label="'实际装货时间'" />
        <el-table-column prop="SHDATE" :label="'实际卸货时间'" />
        <el-table-column prop="SALER" :label="t('tz.SALER')" />
        <el-table-column prop="SALERDEPT" :label="t('tz.SALERDEPT')" />
      </el-table>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref, inject ,watchEffect,watch} from 'vue'
import createAxios from '/@/utils/axios';
import type baTableClass from '/@/utils/baTable'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()


const baTable = inject('baTable') as baTableClass

watch(()=>baTable.form.items!.JOBNO,()=>{
  getTableData()
})

const state = reactive({
  loading:false,
  table:[]
})

const getTableData = ()=>{
  state.loading = true
  createAxios({
    url:'admin/dzd/one_job',
    method:'get',
    params:{
      job:baTable.form.items!.JOBNO
    }
  }).then((res:any)=>{
    state.loading = false
    state.table = res.data.list
  })
}

</script>
